import React from 'react'
import { Form, Row, Button, Select, Input, Col } from 'antd';
const FormItem = Form.Item;
const { Option } = Select

const SearchForm = ({ form: { getFieldDecorator, getFieldsValue, resetFields }, onSearch, onClick, onClick1, advanced }) => {
    const cz = () => {
        if (onClick) {
            onClick();
        }
    };
    const advancedss = () => {
        if (onClick1) {
            onClick1();
        }
    }

    const formItemLayout = {
        // 抽屉里面Form。二列的布局比例
        labelCol: {
            span: 6
        },
        wrapperCol: {
            span: 16
        }
    };
    return (
        <Form className="search-form">
            <Row gutter={24}>
                <Col span={5}>
                    <FormItem label='生产批号:'{...formItemLayout}>
                        {getFieldDecorator('code')(
                            <Input placeholder='请输入' allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20}></Input>
                        )}
                    </FormItem>
                </Col>
                <Col span={5}>
                    <FormItem label='车间:'{...formItemLayout}>
                        {getFieldDecorator('name')(
                            <Select allowClear={true} showSearch>
                                <Option value='试机' key={2}>试机</Option>
                                <Option value='自检' key={3}>自检</Option>
                                <Option value='质检' key={4}>质检</Option>
                            </Select>
                        )}
                    </FormItem>
                </Col>
                <Col span={5}>
                    <FormItem label='机型:'{...formItemLayout}>
                        {getFieldDecorator('type')(
                            <Select placeholder='请输入' allowClear={true} showSearch>
                                <Option value="0">试机</Option>
                                <Option value="1">自检</Option>
                                <Option value="2">质检</Option>
                            </Select>
                        )}
                    </FormItem>
                </Col>
                <Col span={5}>
                    <FormItem label='异常原因:'{...formItemLayout}>
                        {getFieldDecorator('object')(
                            <Select placeholder='请选择' allowClear={true} showSearch >
                                <Option value="品质异常">品质异常</Option>
                                <Option value="工程整改">工程整改</Option>
                                <Option value="欠料">欠料</Option>
                                <Option value="产能不足">产能不足</Option>
                                <Option value="其他">其他</Option>
                            </Select>
                        )}
                    </FormItem>
                </Col>
                <Col span={4} style={{ display: 'flex' }} className="serarch-btns">

                    <FormItem>
                        <Button type="primary" onClick={() => onSearch(getFieldsValue())} icon="search">
                            {'查询'}
                        </Button>
                    </FormItem>
                    <FormItem>
                        <Button type='primary' icon={advanced ? 'up' : 'down'} onClick={() => advancedss()}>
                            {' 展开'}
                        </Button>
                    </FormItem>
                    <FormItem>
                        <Button type="default" onClick={() => {
                            cz()
                            resetFields()

                        }}
                            icon={'redo'}
                        >
                            {'重置'}
                        </Button>
                    </FormItem>
                </Col>
            </Row>
            <Row gutter={24}>
                {
                    advanced ? <Col span={5}>
                        <FormItem label='报告类型:'{...formItemLayout}>
                            {getFieldDecorator('isDelete')(
                                <Select placeholder='请选择' allowClear={true} showSearch>
                                    <Option value={'出机'} key={1}>出机</Option>
                                    <Option value={'交机'} key={2}>交机</Option>
                                </Select>
                            )}
                        </FormItem>
                    </Col> : ''
                }
            </Row>
        </Form>
    )
};
export default Form.create()(SearchForm);